<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>云音乐商城-音乐购有趣-嘿嘿</title>
    <link rel="shortcut icon" href="./bitbug_favicon (3).ico" type="image/x-icon">
    <link rel="stylesheet" href="./lib/reset/reset.css">
    <link rel="stylesheet" href="./css/sp-com.css">
    <link rel="stylesheet" href="./css/shopping.css">
</head>

<body>
    <!-- 顶部搜索 -->
    <div class="top-search" id="top">
        <!-- 版心 -->
        <div class="sp-com clearfix">
            <!-- 左 -->
            <div class="top-search-left">
                <a href="#"></a>
            </div>
            <!-- 搜索 -->
            <div class="top-search-input">
                <input type="text" placeholder="真无线耳机">
            </div>
            <!-- 购物 -->
            <div class="top-search-sp">
                <a href="#">
                    <span>0</span>
                </a>
            </div>
            <!-- 登录 -->
            <div class="top-search-dl">
                <ul class="top-search-dl-hidden clearfix">
                    <a href="#">
                        <li>
                            <img src="./images/phonelog123123.png" alt="" class="tu1">
                            <p>手机号登录</sp>
                        </li>
                    </a>
                    <a href="#">
                        <li>
                            <div class="tu2"></div>
                            <p>微信登录</sp>
                        </li>
                    </a>
                    <a href="#">
                        <li>
                            <div class="tu3"></div>
                            <p>QQ登录</sp>
                        </li>
                    </a>
                    <a href="#">
                        <li>
                            <img src="./images/sina123123123.png" class="tu1">
                            <p>新浪微博登录</sp>
                        </li>
                    </a>
                    <a href="#">
                        <li>
                            <img src="./images/netease123123.png" class="tu1">
                            <p>网易邮箱账号登录</sp>
                        </li>
                    </a>
                </ul>
                <div>登录 </div>
                <span>
                    <div class="top-search-dl-wsj"></div>

                </span>
            </div>
        </div>
    </div>

    <!-- 第二排 背景图片 -->
    <div class="backgr">
        <!-- 版心 -->
        <div class="sp-com">
            <!-- 轮播图 -->
            <div class="backgr-carousel">
                <a href="#"><img src="./images/dot123123123123.png" alt="">
                </a>
                <a href="#"><img src="./images/dot123123123123.png" alt="">
                </a>
                <a href="#"><img src="./images/dot123123123123.png" alt="">
                </a>
                <a href="#"><img src="./images/dot123123123123.png" alt="">
                </a>
                <a href="#"><img src="./images/dot123123123123.png" alt="">
                </a>
                <a href="#"><img src="./images/dot123123123123.png" alt="">
                </a>
            </div>
        </div>

        <!-- zuo -->
        <div class="backgr-left-jiao"></div>
        <!-- you -->
        <div class="backgr-right-jiao"></div>
    </div>

    <!-- 第三排  -->
    <div class="integral">
        <!-- 版心 -->
        <div class="sp-com">
            <a href="#">
                <div>
                    <img src="./images/re123133" alt="">
                    <p>热销爆品</p>
                </div>
            </a>
            <a href="#">
                <div>
                    <img src="./images/re213123" alt="">
                    <p>IP周边</p>
                </div>
            </a>
            <a href="#">
                <div>
                    <img src="./images/re32315" alt="">
                    <p>数码影音</p>
                </div>
            </a>
            <a href="#">
                <div class="integral-zh">
                    <div class="integral-img-jf"></div>
                    <p class="integral-jf">积分商城</p>
                </div>
            </a>
        </div>
    </div>

    <!-- 第四排 -->
    <div class="youth">
        <!-- 版心 -->
        <div class="sp-com">
            <a href="#"><img src="./images/qc123.jpg" alt="" class="youth-img01">
            </a>
            <a href="#"><img src="./images/qc213.jpg" alt="" class="youth-img01">
            </a>
        </div>

        <!-- 固定定位 -->
        <div class="shopping-right-po">
            <a href="#">查看<br>
                营业执照</a>
            <div>100%<br>正品</div>
            <div>七天无理<br>由退货</div>
            <a href="#" class="po04">购物车</a>
            <a href="#" class="po05">
                <div class="head"></div>
                客服
            </a>
            <a href="#top" class="po06"></a>
        </div>
    </div>

    <!-- 第五排 -->
    <div class="recommend">
        <!-- 版心 -->
        <div class="sp-com">
            <p>编辑推荐</p>
        </div>
    </div>

    <!-- 第六排 -->
    <div class="commodity clearfix">
        <!-- 版心 -->
        <div class="sp-com clearfix">
            <!-- 1 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/sp81.jpg" alt="">
                </a>
                <!-- 特价 -->
                <div class="commodity-box-tejia">
                    <p class="commondity-box-tejia-left">&yen;129</p>
                    <p class="commindity-box-tejia-bottom">&yen;199</p>
                </div>
                <div class="commodity-box-bottom clearfix">

                    <a href="#"> <span>特价</span>伯朗 i12触控真无线蓝牙耳机蓝牙5.0苹果安卓通用</a>
                </div>
                <p>&yen;129</p>
            </div>
            <!-- 2 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/sp82.jpg">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"> <span>包邮</span>kinbor 音乐的力量套装 DTB6550</a>
                    </div>
                    <p>&yen;138</p>
                </a>

            </div>
            <!-- 3 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/sp83.jpg">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"><span>特价</span>网易云音乐青春系列印花羽绒服 NO.1</a>
                    </div>
                    <p>&yen;369</p>
                </a>
                <!-- 特价 -->
                <div class="commodity-box-tejia">
                    <p class="commondity-box-tejia-left">&yen;369</p>
                    <p class="commindity-box-tejia-bottom">&yen;669</p>
                </div>
            </div>
            <!-- 4 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/sp84.jpg">
                    <div class="commodity-box-bottom clearfix">
                        <a href="#">网易云音乐联名款真无线蓝牙耳机TWS1</a>
                    </div>
                    <p>&yen;298</p>
                </a>
            </div>
            <!-- 5 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/sp85.jpg">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"> <span>用券享9折</span>易系列尤克里里升级款 网易乐器出品 胡桃木/桃花芯二色可选 入门级合板 23寸</a>
                    </div>
                    <p>&yen;288 <b></b></p>
                </a>
                <!-- 特价 -->
                <div class="commodity-box-tejia">
                    <p class="commondity-box-tejia-left">&yen;288</p>
                    <p class="commindity-box-tejia-bottom">&yen;518</p>
                </div>
            </div>
            <!-- 6 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/sp86.jpg">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"> <span>特价</span>伯朗 i9S蓝牙5.0真无线耳机双耳通话苹果安卓通用</a>
                    </div>
                    <p>&yen;89</p>
                </a>
                <!-- 特价 -->
                <div class="commodity-box-tejia">
                    <p class="commondity-box-tejia-left">&yen;89</p>
                    <p class="commindity-box-tejia-bottom">&yen;169</p>
                </div>
            </div>
            <!-- 7 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/sp87.jpg">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"><span>特价</span>兰士顿 D4线控重低音炮四核双动圈耳机 苹果安卓通用 带麦</a>
                    </div>
                    <p>&yen;99</p>
                </a>
                <!-- 特价 -->
                <div class="commodity-box-tejia">
                    <p class="commondity-box-tejia-left">&yen;99</p>
                    <p class="commindity-box-tejia-bottom">&yen;159</p>
                </div>
            </div>
            <!-- 8 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/sp88.jpg">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"> <span>特价</span>网易云音乐潮流系列保温杯</a>
                    </div>
                    <p>&yen;49</p>
                </a>
                <!-- 特价 -->
                <div class="commodity-box-tejia">
                    <p class="commondity-box-tejia-left">&yen;49</p>
                    <p class="commindity-box-tejia-bottom">&yen;89</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 第七排 -->
    <div class="album">
        <!-- 版心 -->
        <div class="sp-com clearfix">
            <!-- 左边 -->
            <div class="album-left">
                <i>
                    <img src="./images/zuo12312123.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数字专辑
                </i>
                <p>Taylor Swift 新专辑火热售卖中</p>
                <h3>立 即 购 买 ></h3>
            </div>
            <!-- 右边 -->
            <div class="album-right">
                <img src="./images/you123123123.jpg" alt="" class="img01">
                <img src="./images/you21321313.jpg" alt="" class="img02">
                <span></span>
            </div>
        </div>
    </div>

    <!-- 第八排 -->
    <div class="recommend">
        <!-- 版心 -->
        <div class="sp-com">
            <p>热门商品</p>
        </div>
    </div>

    <!-- 第九排 -->
    <div class="commodity ca clearfix">
        <!-- 版心 -->
        <div class="sp-com clearfix">
            <!-- 1 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/下1231313.jpg" class="tu2">
                </a>
                <!-- 特价 -->
                <div class="commodity-box-tejia">
                    <p class="commondity-box-tejia-left">&yen;299</p>
                    <p class="commindity-box-tejia-bottom">&yen;399</p>
                </div>
                <div class="commodity-box-bottom clearfix">

                    <a href="#"> <span>特价</span>伯朗 E43真无线蓝牙耳机蓝牙5.0超长待机安卓苹果通用双耳通话</a>
                </div>
                <p>&yen;299</p>
            </div>
            <!-- 2 -->
            <div class="commodity-box clearfix">
                <a href="#">
                    <img src="./images/qwe2.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"> <span>包邮</span>网易云音乐&本来设计 原木创意手机支架手机座扩音器</a>
                    </div>
                    <p>&yen;149</p>
                </a>
                <!-- 特价 -->
                <div class="commodity-box-tejia">
                    <p class="commondity-box-tejia-left">&yen;149</p>
                    <p class="commindity-box-tejia-bottom">&yen;179</p>
                </div>
            </div>
            <!-- 3 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/qwe3.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"><span>用券减70</span>击音【触控级】降噪防水手势识别蓝牙运动耳机</a>
                    </div>
                    <p>&yen;149</p>
                </a>

            </div>
            <!-- 4 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/qwe4.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">
                        <a href="#"><span>包邮</span>本来设计 原创木质冰箱磁贴 创意礼品生日礼物</a>
                    </div>
                    <p>&yen;59</p>
                </a>
            </div>
            <!-- 5 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/qwe5.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"> <span>用券减30</span>网易云音乐联名款W800X头戴式蓝牙耳机</a>
                    </div>
                    <p>&yen;199 <b></b></p>
                </a>

            </div>
            <!-- 6 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/qwe6.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#">JBL C200SI立体声入耳式耳机 手机音乐耳机 运动游戏耳机 耳机耳麦 带麦可通话</a>
                    </div>
                    <p>&yen;138</p>
                </a>

            </div>
            <!-- 7 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/qwe7.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"><span>用券减200</span>网易云音乐氧气蓝牙耳机Pro版</a>
                    </div>
                    <p>&yen;399</p>
                </a>

            </div>
            <!-- 8 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/qwe8.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#">漫步者（EDIFIER）W2 真无线 入耳式立体声蓝牙耳机 蓝牙5.0 左右可独立使用</a>
                    </div>
                    <p>&yen;299</p>
                </a>

            </div>
            <!-- 9 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/qwe2.jpg" class="tu2">
                </a>
                <div class="commodity-box-bottom clearfix">

                    <a href="#"> <span>用券减70</span>网易云音乐氧气蓝牙耳机青春版</a>
                </div>
                <p>&yen;299</p>
            </div>
            <!-- 10 -->
            <div class="commodity-box clearfix">
                <a href="#">
                    <img src="./images/qwe3.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"> 漫步者（EDIFIER） H230P 入耳式立体声线控耳机</a>
                    </div>
                    <p>&yen;69</p>
                </a>
            </div>
            <!-- 11 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/qwe4.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"><span>用券减200</span>漫步者（EDIFIER） H230P 入耳式立体声线控耳机</a>
                    </div>
                    <p>&yen;149</p>
                </a>

            </div>
            <!-- 12-->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/qwe5.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">
                        <a href="#"><span>特价</span>弯头数据线快充2.4A苹果安卓Type-C 玩游戏充电线</a>
                    </div>
                    <p>&yen;29</p>
                </a>
                <!-- 特价 -->
                <div class="commodity-box-tejia">
                    <p class="commondity-box-tejia-left">&yen;29</p>
                    <p class="commindity-box-tejia-bottom">&yen;49</p>
                </div>
            </div>
            <!-- 13 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/qwe6.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#">击音听键A1 蓝牙音频接收器 4+种佩戴 苹果安卓必备新配件</a>
                    </div>
                    <p>&yen;69 <b></b></p>
                </a>

            </div>
            <!-- 14-->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/qwe7.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"><span>特价</span>JBL T120A 立体声入耳式耳机 手机音乐耳机 游戏耳机 耳机耳麦 带麦可通话</a>
                    </div>
                    <p>&yen;118</p>
                </a>
                <!-- 特价 -->
                <div class="commodity-box-tejia">
                    <p class="commondity-box-tejia-left">&yen;118</p>
                    <p class="commindity-box-tejia-bottom">&yen;128</p>
                </div>
            </div>
            <!-- 15 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/qwe8.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"><span>特价</span>Beats X 颈挂式无线蓝牙手机音乐入耳耳机 带麦可通话耳塞</a>
                    </div>
                    <p>&yen;799</p>
                </a>
                <!-- 特价 -->
                <div class="commodity-box-tejia">
                    <p class="commondity-box-tejia-left">&yen;799</p>
                    <p class="commindity-box-tejia-bottom">&yen;1188</p>
                </div>
            </div>
            <!-- 16 -->
            <div class="commodity-box">
                <a href="#">
                    <img src="./images/下1231313.jpg" class="tu2">
                    <div class="commodity-box-bottom clearfix">

                        <a href="#"><span>包邮</span>本来设计 原木质音乐盒八音盒</a>
                    </div>
                    <p>&yen;199</p>
                </a>

            </div>
        </div>
    </div>

    <!-- 最下面 -->
    <div class="music-bottom">
        <!-- 版心 -->
        <div class="sp-com">
            <!-- 左边 -->
            <div class="music-bottom-left">
                <!-- 第一排 -->
                <div class="music-bottom-one-row">
                    <a href="#">关于网易</a>
                    <li>|</li>
                    <a href="#">客户服务</a>
                    <li>|</li>
                    <a href="#">服务条款</a>
                    <li>|</li>
                    <a href="#">网站导航</a>
                    <li>|</li>
                    <a href="#">意见反馈</a>
                    <br>

                </div>
                <!-- 二 -->
                <p class="music-bottom-p1">网易公司版权所有©1997-2019 &nbsp;&nbsp;&nbsp;&nbsp;杭州乐读科技有限公司运营：<a href="#">浙网文[2015]
                        0415-135号</a></p>
            </div>

            <!-- 右边 -->
            <div class="music-bottom-right">
                <div class="music-bottom-right-box">
                    <a href="#"><span class="music-bottom-right-img1">
                        </span></a>
                    <li>独立音乐人</li>
                </div>
                <div class="music-bottom-right-box">
                    <a href="#"> <span class="music-bottom-right-img2">
                        </span></a>
                    <li>音乐专栏</li>
                </div>
                <div class="music-bottom-right-box">
                    <a href="#"> <span class="music-bottom-right-img3">
                        </span></a>
                    <li>自媒体</li>
                </div>
                <div class="music-bottom-right-box">
                    <a href="#"> <span class="music-bottom-right-img4">
                        </span></a>
                    <li>赞赏</li>
                </div>
            </div>
        </div>

        <!-- 放回,固定 -->
        <a href="#id-top" class="fh-top" title="返回顶部"></a>
    </div>
</body>

</html>